<script>
import { api } from '@/api';
import { setNavbarTitle } from '@/stores/app';
import dayjs from 'dayjs';

export default {
  components: {
  },
  computed: {
  },
  data() {
    return {
      detail: {}
    }
  },
  async created() {
    const { data } = await api.articelDetail(this.$route.params.id)
    this.detail = data
    this.detail.update_time = dayjs(this.detail.update_time).format('YYYY-MM-DD HH:mm:ss')
    const decodedString = document.createRange().createContextualFragment(data.article_content).textContent;
    this.detail.article_content = decodedString
    setNavbarTitle(this.detail.article_title)
  },
  methods: {
  },
}
</script>

<template>
  <div class="news-detail">
    <div class="news-title">
      {{ detail.article_title }}
    </div>
    <div class="news-date">
      <span style="margin-right: 20px;">{{ detail.update_time }}</span>
      <span>浏览次数:{{ detail.actual_views }}</span>
    </div>
    
    <div class="news-content" v-html="detail.article_content" />
  </div>
</template>

<style lang="less" scoped>
.news-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;

  .news-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }

  .news-date {
    font-size: 12px;
    text-align: center;
    color: #999;
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
  }
}
</style>
